import React, {useState} from "react";
import type { ColumnsType } from 'antd/es/table';
import {Table, Space, Button} from 'antd';

export default function GoodsCom() {
  let [current, setCurrent] = useState(1)
  //1. 定义单条数据的结构
  interface GoodsItem {
    remote_img: string;
    title: string;
    price: string;
    shop: string;
    url: string;
    isZY: boolean;
    img: string;
    id: number;
  }

  //2. 定义表格的结构
  let columns: ColumnsType<GoodsItem> = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '商品标题',
      dataIndex: 'title'
    },
    {
      title:'商品图片',
      dataIndex: 'img',
      render: v => {
        return <img width="100" src={'http://cdn.xiaohigh.com' + v} alt="" />
      }
    },
    {
      title: '操作',
      render: () => {
        return <Space>
          <Button href="">修改</Button>
          <Button href="">删除</Button>
        </Space>
      }
    }
  ];

  //3. 商品数据
  let data: GoodsItem[] = [
    {
      remote_img:
        "http://img14.360buyimg.com/n7/jfs/t1/190177/5/20205/91340/612dc9d1Ea57ded86/53a5e2d24dabf32d.jpg",
      title:
        "一加 OnePlus 9 Pro 5G旗舰2K+120Hz 柔性屏12GB+256GB 绿洲 骁龙888 65W快充 哈苏专业模式 超广角拍照手机",
      price: "5499.00",
      shop: "一加手机京东自营官方旗舰店",
      url: "https://item.jd.com/100019141914.html",
      isZY: true,
      img: "/images/goods/53a5e2d24dabf32d.jpg",
      id: 1,
    },
    {
      remote_img:
        "http://img13.360buyimg.com/n7/jfs/t1/189261/39/3773/121751/60a269ecE4cd8a070/df2735c6ee1a895a.jpg",
      title:
        "荣耀Play5T 22.5W超级快充 5000mAh大电池 6.5英寸护眼屏 全网通8GB+128GB极光蓝",
      price: "1189.00",
      shop: "荣耀京东自营旗舰店",
      url: "https://item.jd.com/100021830458.html",
      isZY: true,
      img: "/images/goods/df2735c6ee1a895a.jpg",
      id: 2,
    },
    {
      remote_img:
        "http://img13.360buyimg.com/n7/jfs/t1/198525/38/8395/144282/6140705bE7dd39929/e805d8c02b7e1f3b.jpg",
      title:
        "Redmi Note 9 4G 6000mAh大电池 骁龙662处理器  18W快充 羽墨黑 6GB+128GB 智能手机 小米 红米",
      price: "999.00",
      shop: "小米京东自营旗舰店",
      url: "https://item.jd.com/100016784108.html",
      isZY: false,
      img: "/images/goods/e805d8c02b7e1f3b.jpg",
      id: 3,
    },
    {
      remote_img:
        "http://img11.360buyimg.com/n7/jfs/t1/186256/6/554/135561/6082904aE2a61d056/c921c551039621d0.jpg",
      title:
        "荣耀畅玩20 5000mAh超大电池续航 6.5英寸大屏  莱茵护眼 4GB+128GB 极光蓝 双卡双待 全网通",
      price: "889.00",
      shop: "荣耀京东自营旗舰店",
      url: "https://item.jd.com/100011186161.html",
      isZY: false,
      img: "/images/goods/c921c551039621d0.jpg",
      id: 4,
    },
    {
      remote_img:
        "http://img13.360buyimg.com/n7/jfs/t1/200673/15/4432/202879/612ddc90Ec08afda5/9ef1faa1babfcf31.jpg",
      title:
        "Redmi 9A 5000mAh大电量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 晴空蓝 游戏智能手机 小米 红米",
      price: "599.00",
      shop: "小米京东自营旗舰店",
      url: "https://item.jd.com/100014348478.html",
      isZY: true,
      img: "/images/goods/9ef1faa1babfcf31.jpg",
      id: 5,
    },
  ];

  //rowKey 用来设置哪个属性的值, 作为列表元素的 key 值
  return <Table 
            columns={columns} 
            dataSource={data} 
            rowKey={'id'} 
            pagination={{
              total: 90,
              pageSize: 5,
              current: current,
              pageSizeOptions: [5, 10, 15, 20],
              showQuickJumper: true,
              showTotal: (total) => {
                return `数据总计 ${total} 条`;
              }
            }}
            />;
}
